<template>
	<div>
		<div>
			<el-form :inline="true" ref="searchForm" :model="searchForm" class="forTbFilter flowStatistics"
				label-position="left" @submit.native.prevent>

				<el-form-item label="IMEI：" v-if="curr_role==2">
					<el-input v-model.trim="searchForm.imei" clearable></el-input>
				</el-form-item>

				<el-form-item label="所属客户：" v-if="curr_role==2">
					<el-select v-model="searchForm.agentId" filterable placeholder="请选择或输入关键字" clearable
						@change="changeAgentId()">
						<el-option v-for="item in agentsOption" :value="item.id" :key="item.id"
							:label="item.name"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="所属链接：">
					<!-- 根据选择的客户，选取所属链接 -->
					<el-select v-model="searchForm.urlId" filterable placeholder="请选择或输入关键字" clearable>
						<el-option v-for="item in urlsOption" :value="item.id" :key="item.id"
							:label="item.urlNote"></el-option>
					</el-select>

				</el-form-item>

				<el-form-item label="创建时间：" class="dateRange">
					<el-date-picker v-model="searchForm.time" range-separator="至" type="daterange" start-placeholder="开始日期"
						end-placeholder="结束日期" value-format="yyyy-MM-dd"></el-date-picker>
				</el-form-item>


				<el-form-item class="btnArea">
					<el-button type="primary" @click="getFlowStatisticsHandler" icon="el-icon-search">查 询</el-button>
					<el-button type="primary" @click="excelSelect()" icon="el-icon-download">导出数据</el-button>
				</el-form-item>
			</el-form>
		</div>



		<el-table :data="tbpg.tableData" border height="600">
			<el-table-column type="index" label="序号"></el-table-column>
			<el-table-column prop="urlName" label="链接名称"></el-table-column>
			<el-table-column prop="agentName" label="客户名称"></el-table-column>
			<el-table-column prop="imeiMD5" label="imeiMD5" v-if="field_show.imeiMD5_status == '1'"></el-table-column>
			<el-table-column prop="idfaMD5" label="idfaMD5" v-if="field_show.idfaMD5_status == '1'"></el-table-column>
			<el-table-column prop="callback" label="callback" v-if="field_show.callback_status == '1'"></el-table-column>

			<el-table-column prop="createTime" label="创建时间"></el-table-column>

			
			<el-table-column prop="accountid" label="accountid" v-if="field_show.accountid_status == '1'"></el-table-column>
			<el-table-column prop="did" label="did" v-if="field_show.did_status == '1'"></el-table-column>
			<el-table-column prop="aid" label="aid" v-if="field_show.aid_status == '1'"></el-table-column>
			<el-table-column prop="cid" label="cid" v-if="field_show.cid_status == '1'"></el-table-column>
			<el-table-column prop="dname" label="dname" v-if="field_show.dname_status == '1'"></el-table-column>
			<el-table-column prop="unitname" label="unitname" v-if="field_show.unitname_status == '1'"></el-table-column>
			<el-table-column prop="photoid" label="photoid" v-if="field_show.photoid_status == '1'"></el-table-column>
			<el-table-column prop="oaid2" label="oaid2" v-if="field_show.oaid2_status == '1'"></el-table-column>
			<el-table-column prop="os" label="os" v-if="field_show.os_status == '1'"></el-table-column>
			<el-table-column prop="model" label="model" v-if="field_show.model_status == '1'"></el-table-column>
			<el-table-column prop="ip" label="ip" v-if="field_show.ip_status == '1'"></el-table-column>
			<el-table-column prop="csite" label="csite" v-if="field_show.csite_status == '1'"></el-table-column>

		</el-table>
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="tbpg.currentPage" :page-sizes="[15, 50, 100, 500]" :page-size="tbpg.pageSize"
			layout="total, sizes, prev, pager, next, jumper" :total="tbpg.total">
		</el-pagination>

	</div>
</template>
<script>

import {
	getKuaiShouPermissionInfo
} from '@/api/fluxPools.js'

import {
	getFieldList
} from '@/api/fieldManage.js'

import common from '@/utils/common.js'
// var echarts = require('echarts'); // 引入 ECharts 主模块
export default {
	data() {
		return {

			// 不同角色 允许显示的字段
			field_show: {
				"idfaMD5_status": "1",
				"imeiMD5_status": "1",
				"callback_status": "1",
                "createTime": "1",

				"accountid_status": "1",
				"did_status": "1",
				"aid_status": "1",
				"cid_status": "1",
				"dname_status": "1",
				"unitname_status": "1",
				"photoid_status": "1",
				"oaid2_status": "1",
				"os_status": "1",
				"model_status": "1",
				"ip_status": "1",
				"csite_status": "1",
			},

			batchOptVisible1: false,

			agentsOption: [],
			urlsOption: [],
			searchForm: {
				agentId: '',
				urlId: '',
				imei: ''
			},
			//每月流量详情表
			tbpg: {
				tableData: [],
				currentPage: 1,
				pageSize: 15,
				total: 0
			},

			curr_role: "", // 当前登录用户的id

		}
	},
	methods: {

		// 当改变了客户列表选择时
		changeAgentId() {
			this.handleKuaiShouPermissionUrlList();
		},


		handleSuccess(res) {
			if (res.code == 200) {
				this.$message.success(res.message);
			} else {
				this.$message.error(res.message);
			}
			this.cancel();
			this.$refs.upload.clearFiles();
		},


		excelSelect($event) {
			common.resetCurrentPage(this, $event, 'tbpg');
			var data = common.getRequestParams(this, 'tbpg', this.searchForm);
			data.token = localStorage.getItem('token');
			common.sysRequest('excels/all/baiduUrlInfos', data, 'post').then(res => {
				if (res.data.code == 200) {
					this.$message.success('下载中，请稍后在下载管理中查询');
				} else {
					this.$message.error(res.data.message);
				}
			})
		},


		// 触发查询按钮
		getFlowStatisticsHandler($event) {
			common.resetCurrentPage(this, $event, 'tbpg');
			var data = common.getRequestParams(this, 'tbpg', this.searchForm);

			// wzyk新增
			getKuaiShouPermissionInfo(data).then(res => {
				common.listCallback(this, res, 'tbpg')
			})
			// wzyk新增
		},



		handleSizeChange(val) {
			this.tbpg.pageSize = val;
			this.getFlowStatisticsHandler();
		},
		handleCurrentChange(val) {
			this.tbpg.currentPage = val
			this.getFlowStatisticsHandler();
		},

		// 获取客户自己的链接
		handleKuaiShouPermissionUrlList() {
			// //wzyk 新增
			common.sysRequest('kuaishou/permissionList/all', this.searchForm, 'post').then(res => {
				if (res.data.code == 200) {
					// console.log(res);
					this.urlsOption = res.data.data;
				}
			})
		},

		// 给不同用户装配可显示字段
		handleFieldShow() {
			let that = this;
			getFieldList().then(res => {
				if (res.data.message === "2") {
					that.field_show.idfaMD5_status = "1";
					that.field_show.imeiMD5_status = "1";
                    that.field_show.callback_status = "1";

					that.field_show.accountid_status = "1";
					that.field_show.did_status = "1";
					that.field_show.aid_status = "1";
					that.field_show.cid_status = "1";
					that.field_show.dname_status = "1";
					that.field_show.unitname_status = "1";
					that.field_show.photoid_status = "1";
					that.field_show.oaid2_status = "1";
					that.field_show.os_status = "1";
					that.field_show.model_status = "1";
					that.field_show.ip_status = "1";
					that.field_show.csite_status = "1";

				} else {
					var list = res.data.data;
					for (var i = 0; i < list.length; i++) {
						if (list[i]["source"] != "快手") {
							continue;
						}
						if (list[i]["name"] === "idfa_md5" && list[i]["status"] === "0") {
							that.field_show.idfaMD5_status = "0";
						}
						if (list[i]["name"] === "imei_md5" && list[i]["status"] === "0") {
							that.field_show.imeiMD5_status = "0";
						}
                        if (list[i]["name"] === "callback" && list[i]["status"] === "0") {
							that.field_show.callback_status = "0";
						}

						if (list[i]["name"] === "accountid" && list[i]["status"] === "0") {
							that.field_show.accountid_status = "0";
						}
						if (list[i]["name"] === "did" && list[i]["status"] === "0") {
							that.field_show.did_status = "0";
						}
						if (list[i]["name"] === "aid" && list[i]["status"] === "0") {
							that.field_show.aid_status = "0";
						}
						if (list[i]["name"] === "cid" && list[i]["status"] === "0") {
							that.field_show.cid_status = "0";
						}
						if (list[i]["name"] === "dname" && list[i]["status"] === "0") {
							that.field_show.dname_status = "0";
						}
						if (list[i]["name"] === "unitname" && list[i]["status"] === "0") {
							that.field_show.unitname_status = "0";
						}
						if (list[i]["name"] === "photoid" && list[i]["status"] === "0") {
							that.field_show.photoid_status = "0";
						}
						if (list[i]["name"] === "oaid2" && list[i]["status"] === "0") {
							that.field_show.oaid2_status = "0";
						}
						if (list[i]["name"] === "os" && list[i]["status"] === "0") {
							that.field_show.os_status = "0";
						}
						if (list[i]["name"] === "model" && list[i]["status"] === "0") {
							that.field_show.model_status = "0";
						}
						if (list[i]["name"] === "ip" && list[i]["status"] === "0") {
							that.field_show.ip_status = "0";
						}
						if (list[i]["name"] === "csite" && list[i]["status"] === "0") {
							that.field_show.csite_status = "0";
						}


					}
				}
			})
		}

	},
	created() { },

	mounted() {
		this.getFlowStatisticsHandler();
		// 装填 agentid 列表
		common.getNextAgentOptsCom(this, 'agentsOption');
		// 原始获取专属链接操作

		this.handleKuaiShouPermissionUrlList();
		this.handleFieldShow();
		this.curr_role = localStorage.getItem('id');
		this.handleKuaiShouPermissionUrlList();
	},

	updated: function () {

	},

	watch: {

	}
}
</script>

<style>
.flowStatistics .el-input-group__prepend,
.flowStatistics .el-input-group__append {
	background-color: #f5f5f5;
}

.flowStatistics .el-form-item__content {
	width: 250px;
}
</style>

<style lang="less" scoped>
.forTbFilter {
	display: inline-block;

	.btnArea {
		display: inline-block;
		margin-left: 30px;

	}
}

.stopMessage {
	font-size: 18px;
	margin: 0 0 10px 0;

	span {
		color: #ea2929;
		margin-right: 60px;

	}
}
</style>